<template>
	<view class="container">
		<view class="content">
			<view class="title borderBottom name">
				<view class="name_title"><text>工作室名称：</text><input type="text" v-model="params.name" placeholder="请设置工作室名称" placeholder-class="placeholder"></view>
				<view class="tips" v-if="hasItBeenVerified&&!params.name">请设置工作室名称</view>
			</view>
			<view class="avter borderBottom">
				<view>
					<view class="title">工作室头像</view>
					<view class="explain">建议上传白色背景的头像</view>
					<view class="tips" v-if="hasItBeenVerified&&!params.avatar">您还没有上传图像</view>
				</view>
				<view class="image" @click="handleChooseImage">
					<image :src="params.avatar?params.avatar:avaterMO" mode=""></image>
					<uni-icons type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
				</view>
			</view>
			<view class="introduce borderBottom">
				<view class="title">工作室介绍</view>
				<view class="explain">使用简短的一句话介绍一下自己的工作室吧。</view>
			    <textarea v-model="params.introduce" placeholder="输入工作室介绍" />
				<view class="tips" v-if="hasItBeenVerified&&!params.introduce">您还没有编辑工作室简介。</view>
			</view>
			<view class="address">
				<view class="title">接单地址</view>
				<view class="explain">完善地址信息后才可以接单哦。</view>
				<view class="selectAddress">
					<picker mode="region" @change='change' class="picker" value="{{region}}">
					    <view class="picker">
					        {{region[0]?`${region[0]},${region[1]},${region[2]}`:'请选择省市区'}}
					    </view>
					</picker>
					<uni-icons type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
					
				</view>
				<textarea v-model='params.address' placeholder="输入详细地址" />
			</view>
			<view class="tips" v-if="hasItBeenVerified&&(!params.address|| !region)">您还没有填写接单地址。</view>
		</view>
		<view class="server">
			<view class="server_title">
				<view class="">
					<view class="title">服务管理</view>
					<view class="explain">选择可以提供的服务项目。</view>
				</view>
				<view class="toSelect" @click="toSelectServer">
					<text>选择服务</text>
					<uni-icons type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
				</view>
			</view>
			<view class="serviceList" v-if="params.studioGoods&&params.studioGoods.length">
				<view v-for="(item,index) in params.studioGoods" :key="item.id" :class="index>2?'nth3':''">{{item.name}}</view>
			</view>
			<view class="tips" v-if="hasItBeenVerified&&params.studioGoods&&params.studioGoods.length==0">您还没有选择服务项目。</view>
		</view>
		<view class="btn" @click="submit">设置完成，开始接单</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" confirmText="好的" title="设置工作室" :content="`您已成为${detail.selectOpeningType==1?'金牌':'普通'}陪宠师，完善好您的工作室服务信息后即可开始接单`" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import {ref,watch} from 'vue'
import api from '@/api'
import config from '@/config'
import {onLoad,onShow} from '@dcloudio/uni-app'
import {studioReset} from "@/store/useStudioStore";
import {useStudioGoodsStoreToRefs} from "@/store/useStudioGoodsStore";
import { useUserStoreToRefs } from '@/store/useUserStore'
import { useStudioStoreToRefs } from "@/store/useStudioStore";
let {serviceList} = useStudioGoodsStoreToRefs()
const { userInfo } = useUserStoreToRefs()
let { workSpace } = useStudioStoreToRefs()
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const avaterMO = ref(url.value+'icon-02.png')
const params = ref({
	avatar:'',
	introduce:'',
	address:'',
	name:'',
	studioGoods:null,
	latitudeLongitude:''
})
const detail = ref({
	deposit:'',
	selectOpeningType:''
})
onLoad((e)=>{
	detail.value.selectOpeningType = e.selectOpeningType?e.selectOpeningType:''
	detail.value.deposit = e.deposit&&detail.value.selectOpeningType=='1'?e.deposit:0
	serviceList.value = []
})
onShow(()=>{
	params.value.studioGoods = serviceList.value
})
//获取经纬度
const getLocation = (address)=> {
    return new Promise((resolve, reject) => {
    uni.request({
        url: config.mapUrl, //腾讯官方逆解析接口，可直接复制
        data: {
			address,
			key: config.mapKey, //自己申请的Key
			output: "jsonp",
        },
        method: "GET",
        success(json:any) {
			if (json.data.status == 1) {
				params.value.latitudeLongitude = json.data.geocodes[0].location
				resolve(json);
			}else {
				uni.showToast({
					title: '获取该位置经纬度失败,请重试',
					icon: 'none'
				});
				flay.value = true
				   reject();
				}
          },
          fail: (res) => {
			  uni.showToast({
			  	title: '获取该位置经纬度失败,请重试',
			  	icon: 'none'
			  });
			  flay.value = true
            reject();
          },
        });
      });
}

//上传头像
const handleChooseImage = () =>{
	uni.chooseImage({
		count:1,
		sourceType:['album'],
		success:async(res)=> {
			uni.uploadFile({
				url: 'https://xjs-test.ctgaba.com/api/mall/user/uploadFacePic',
				filePath:res.tempFilePaths[0],
				name: 'file',
				header:{
					'x-flow-id':new Date().getTime(),
				},
				formData: {
					'user': 'test'
				},
				success: (uploadFileRes) => {
					params.value.avatar = JSON.parse(uploadFileRes.data).data
				}
			})
		}
	})
}

const region = ref([])//选择的地址 省市区
//获取选择的地址
const change = (e) =>{
	region.value = e.detail.value
}

//选择服务
const toSelectServer = () =>{
	studioReset()
	uni.navigateTo({
		url:'/pages/workshopManagement/addService/index'
	})
}

// 去空格
const trimAll = (ele:string) =>{
	return ele.split(/[\t\r\f\n\s]*/g).join('')
}

watch(params,(newVal)=>{
	params.value.name = trimAll(newVal.name)
	params.value.address = trimAll(newVal.address)
	params.value.introduce = trimAll(newVal.introduce)
},{ deep: true })

const hasItBeenVerified = ref<Boolean>(false) //是否已经校验
const flay = ref<Boolean>(true) //开关
const alertDialog = ref(null)
const submit = async () =>{
	if(!flay.value) return
	flay.value = false
	if(!params.value.avatar||!params.value.name||!params.value.introduce||!region.value|| params.value.studioGoods.length==0||!params.value.address){
		hasItBeenVerified.value = true
		flay.value = true
		return
	}
	let str = region.value.join('') +  params.value.address
	await getLocation(str)
	const data = {
		...params.value,
		deposit:detail.value.deposit,
		type:detail.value.selectOpeningType,
		userId:userInfo.value.id,
		province:region.value[0],
		city:region.value[1],
		area:region.value[2],
		latitudeLongitude:params.value.latitudeLongitude
	}
	
	const res:any = await api({
		method: 'post',
		url: `/mall/studio/saveStudio`,
		data:data
	})
	if(res){
		serviceList.value = []
		flay.value = true
		if(res.code==0){
			alertDialog.value.open()
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
}
const dialogConfirm = async () =>{
	const res : any = await api({
		method: 'get',
		url: `/mall/studio/checkStudio`,
		data: {
			userId: userInfo.value.id
		}
	})
	if (res.data) {
		workSpace.value = res.data
	}
	uni.reLaunch({
		url:'/pages/home/index'
	})
}
</script>

<style lang="scss" scoped>
.container{
	min-height: 100vh;
	line-height: 1;
	padding:32rpx;
	box-sizing: border-box;
	background-color: #F9F6F6;
	.title{
		color: #1A1A1A;
		font-size: 32rpx;
		font-weight: bold;
	}
	.explain{
		color: #7C807F;
		font-size: 26rpx;
		margin-top: 16rpx;
	}
    textarea{
    	width: 100%;
    	color: #1B2120;
    	background: #F9F6F6;
    	border-radius: 16rpx;
    	padding: 32rpx;
    	font-size: 30rpx;
    	line-height: 30rpx;
    	box-sizing: border-box;
    }
    .placeholder{
    	color: #CACCCC;
    	font-size: 30rpx;
    }
}
.content{
	border-radius: 24rpx;
	padding: 40rpx 32rpx;
	background-color: #fff;
	box-sizing: border-box;
	>view.title{
		@include flex(center);
		// text{
		// 	color: #FFFFFF;
		// 	font-size: 24rpx;
		// 	padding:8rpx 16rpx;
		// 	background: #6363FF;
		// 	border-radius: 36rpx;
		// 	margin-left: 16rpx;
		// }
	}
	.name{
		display: block !important;
		.name_title{
			@include flex(center);
			text{
				// width: 200rpx;
			}
			input{
				width: calc(100% - 200rpx - 32rpx);
				margin-left: 32rpx;
				font-weight: normal;
			}
		}
	}
	.avter{
		@include flex(center,space-between);
		.image{
			@include flex(center);
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
		}
	}
	.introduce{
		textarea{
			height: 238rpx;
			margin-top: 32rpx;
		}
	}
	.address{
		.selectAddress{
			width: 100%;
			padding:32rpx;
			margin-top: 32rpx;
			background: #F9F6F6;
			margin-bottom: 8rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			@include flex(center,space-between);
			.picker{
				width: calc(100% - 40rpx);
				color: #1B2120;
				font-size: 30rpx;
			}
		}
		textarea{
			height: 176rpx;
		}
	}
}
.server{
	margin: 24rpx 0;
	padding:40rpx 32rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 24rpx;
	.server_title{
		width: 100%;
	   @include flex(center,space-between);
	   .toSelect{
		   color: #1B2120;
		   font-size: 26rpx;
		    @include flex(center);
	   }
	}
	.serviceList{
		@include flex(center,space-between);
		flex-wrap: wrap;
		margin-top: 30rpx;
		view{
			width: 300rpx;
			height: 70rpx;
			font-size: 30rpx;
			color: #1B2120;
			background: #FFFFFF;
			border-radius: 8rpx;
			
			border: 2rpx solid #CACCCC;
			@include flex(center,center);
			&:nth-child(2n-1){
				margin-right: 16rpx;
			}
		}
		.nth3{
			margin-top: 24rpx;
		}
	}
}
.btn{
	width: 100%;
	height: 88rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	border-radius: 62rpx;
	@include flex(center,center);
	background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
}
.borderBottom{
	margin-bottom: 40rpx;
	padding-bottom: 40rpx;
	border-bottom: 2rpx solid #E6E6E6;
}
.tips{
	font-size: 13px;
	color: #FF5253;
	margin-top: 16rpx;
}
::v-deep .uni-popup-dialog{
	.uni-popup__success{
		color: #1A1A1A;
	}
	.uni-dialog-content-text{
		line-height: 40rpx;
	}
	.uni-button-color{
		color: #FF6188;
	}
}
</style>
